* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}
/*定义网页的头部样式*/
.nav_box {
    position: fixed;
    display: flex;
    top: 0;
    width: 100%;
    height: 100px;
    max-height: 100px;
}
.nav_box ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.91);
}

.nav_box li {
    float: right;
}

.nav_box li.a {
    display: flex;
    color: white;
    text-align: center;
    /*padding: 14px 16px;*/
    text-decoration: none;
}

.nav_box li.a:hover {
    color: rgba(47, 149, 232, 0.76);
}

/*定义网页的头部样式*/
/*!*!*侧边栏*!*!*/
/*body {*/
/*    height: 100vh;*/
/*    background: linear-gradient(*/
/*            #9fc0cf,*/
/*            #e5edf1*/
/*    );*/
/*    font-family: 'Roboto', sans-serif;*/
/*}*/

/*.container {*/
/*    position: fixed;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*/ / background: url('../images/bg.png');*/
/*    background-repeat: no-repeat;*/
/*    background-position: bottom;*/
/*}*/

/*!*侧边栏收缩后得宽度*!*/
/*.container nav {*/
/*    position: fixed;*/
/*    left: 0;*/
/*    width: 100px;*/
/*    height: 100%;*/
/*    padding: 16px;*/
/*    border-radius: 0;*/
/*    backdrop-filter: blur(18px);*/
/*    background: rgba(230, 235, 240, .7);*/
/*    border: 0 solid rgba(230, 235, 240, .7);*/
/*    box-shadow: 0 0 30px rgba(0, 0, 0, .05);*/
/*    transition: .6s cubic-bezier(.8, .5, .5, .8);*/
/*}*/

/*!*侧边栏打开得宽度*!*/
/*.container nav:hover {*/
/*    width: 300px;*/
/*}*/

/*nav .brand {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*nav .brand img {*/
/*    width: 60px;*/
/*    border-radius: 50%;*/
/*    border: 4px solid rgba(230, 235, 240, .8);*/
/*}*/

/*nav .brand p {*/
/*    color: #505257;*/
/*    font-weight: 500;*/
/*    font-style: italic;*/
/*/ / 斜体 text-align: center;*/
/*    line-height: 25px;*/
/*    margin: 0 0 0 12px;*/
/*}*/

/*nav .brand p span {*/
/*    color: rgba(0, 8, 16, 0.56);*/
/*    display: block;*/
/*    font-size: 26px;*/
/*    font-style: normal;*/
/*}*/

/*!*横线*!*/
/*nav .line {*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    margin: 20px 0;*/
/*    border-radius: 30%;*/
/*    background: #87a3af;*/
/*}*/

/*nav .list {*/
/*    width: 100%;*/
/*}*/
/*!*!*!*点击后显示*!*!*!*/
/*nav .list li {*/
/*    display: flex;*/
/*    margin: 12px 0;*/
/*    padding: 20px;*/
/*    cursor: pointer;*/
/*    border-radius: 8px;*/
/*    transition: .4s ease-in-out;*/
/*}*/

/*!*!*选择背景颜色*!*!*/
/*nav .list li:hover {*/
/*    background: rgba(47, 149, 232, 0.54);*/
/*}*/
/*!*!*下拉菜单*!*!*/
/*!*!* 下拉内容的样式 *!*!*/
/*!*!*点击后显示,二级菜单*!*!*/
/*!*!*鼠标不移动不显示二级菜单*!*!*/
/*!*!*点击后显示*!*!*/
/*nav >ul>li:hover li{*/
/*    background: rgb(255, 255, 255);*/
/*}*/
/*nav >ul>li>ul{*/
/*    display: none;*/
/*}*/
/*nav >ul>li:hover ul{*/
/*    display:block;*/
/*    margin-left: 0;*/
/*    margin-top: 40px;*/
/*    margin-right: auto;*/
/*    width: 100%;*/
/*    height:100%;*/
/*    padding: 20px;*/
/*    cursor: pointer;*/
/*    border-radius: 8px;*/
/*    background: rgba(255, 255, 255, 0.68);*/
/*}*/
/*!*点击后显示,二级菜单*!*/
/*!*下拉菜单*!*/

/*nav .list li.active {*/
/*    background: #3681f6;*/
/*}*/

/*nav .list li.active span {*/
/*    color: #fff;*/
/*}*/

/*nav .list li.active i {*/
/*    background: none;*/
/*    -webkit-background-clip: unset;*/
/*    -webkit-text-fill-color: unset;*/
/*    color: #e6ebf0;*/
/*}*/

/*nav .list i {*/
/*    font-size: 25px;*/
/*    background: linear-gradient(*/
/*        -135deg,*/
/*        #3c3e43,*/
/*        #838487*/
/*    );*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*}*/
/*!*字体颜色大小*!*/
/*nav .list span {*/
/*    !*可以根据缩小不会自动换行*!*/
/*    position: fixed;*/
/*    color: #505257;*/
/*    font-size: 18px;*/
/*    font-weight: 500;*/
/*    margin: 0 0 0 50px;*/
/*}*/

/*nav .brand p,*/
/*nav .list span {*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transform: translateX(20px);*/
/*}*/

/*@keyframes fadeIn {*/
/*    to {*/
/*        opacity: 1;*/
/*        pointer-events: unset;*/
/*        transform: translateX(0);*/
/*    }*/
/*}*/

/*nav:hover .brand p {*/
/*    animation: fadeIn .4s ease-out forwards;*/
/*    animation-delay: .4s;*/
/*}*/

/*nav:hover .list span {*/
/*    animation: fadeIn .4s ease-out forwards;*/
/*}*/

/*nav:hover .list li:nth-child(1) span {*/
/*    animation-delay: .5s;*/
/*}*/

/*nav:hover .list li:nth-child(2) span {*/
/*    animation-delay: .6s;*/
/*}*/

/*nav:hover .list li:nth-child(3) span {*/
/*    animation-delay: .7s;*/
/*}*/

/*nav:hover .list li:nth-child(4) span {*/
/*    animation-delay: .8s;*/
/*}*/

/*nav:hover .list li:nth-child(5) span {*/
/*    animation-delay: .9s;*/
/*}*/

/*nav:hover .list li:nth-child(7) span {*/
/*    animation-delay: 1s;*/
/*}*/
/*侧边栏*/
* {
    margin: 0;
    padding: 0;
}

.container {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: bottom;
}

.container nav {
    position: fixed;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 16px;
    cursor: pointer;
    /*border-radius: 8px;*/
    backdrop-filter: blur(18px);
    background: rgba(47, 149, 232, 0.2);
    box-shadow: 0 0 30px rgba(47, 149, 232, 0.4);
    transition: .6s cubic-bezier(.8, .5, .5, .8);
}

.container .home_box {
    position: fixed;
    top: 70px;
    left: 115px;
    right: 10px;
    bottom: 10px;
    background: rgba(57, 172, 223, 0.1);
}

nav .brand {
    width: 100%;
    display: flex;
}

nav .brand img {
    width: 60px;
    border-radius: 50%;
}

nav .brand p {
    display: none;
}

/*字体颜色大小*/
nav .brand p {
    color: #505257;
    font-weight: 500;
    font-style: italic;
/ / 斜体 text-align: center;
    line-height: 25px;
    margin: 0 0 0 12px;
}

nav .brand p span {
    color: rgba(0, 8, 16, 0.56);
    display: block;
    font-size: 26px;
    font-style: normal;
}

nav:hover .brand p {
    display: block;
    color: #505257;
    font-weight: 500;
    font-style: italic;
/ / 斜体 text-align: center;
    line-height: 25px;
    margin: 0 0 0 12px;
}

/*横线*/
nav .line {
    width: 100%;
    height: 2px;
    margin: 20px 0;
    border-radius: 30%;
    background: #87a3af;
}

/*侧边栏打开得宽度*/
.container nav:hover {
    width: 250px;
    background: rgba(255, 255, 255, 0.2);
}

.accordion-menu {
    margin-top: 100px;
    width: 100%;
    max-width: 300px;
}

/*{#一级列表#}*/
.accordion-item {
    display: block;
    width: 100%;
    margin-bottom: 2px;
    background: rgba(57, 172, 223, 0.49);
/ / 列表间隔距离
}

.accordion-item:hover {
    display: block;
    width: 100%;
    height: auto;
    background: rgba(47, 149, 232, 0.76);
/ / 列表间隔距离
}

.accordion-header {
    display: none;
}

nav:hover .accordion-header {
    display: block;
    top: 50%;
    height: 60px;
    line-height: 45px; /* 设置行高等于容器高度，实现单行文本的垂直居中 */
    text-align: center; /* 水平居中，如果需要的话 */
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    background-color: rgba(47, 149, 232, 0.49);
    /*//一级菜单颜色#}*/
}

/*{#二级菜单空间设置#}*/
.accordion-content,
.submenu-content {
    display: none;
    left: 0;
    width: 100%;
    background: rgba(57, 172, 223, 0.48);
}

.submenu {
    margin-top: 0;
}

.submenu-item {
    display: none;
}

nav:hover .submenu-item {
    display: block;
    width: 100%;
}

/*{#二级菜单显示主体#}*/
.submenu-header {
    line-height: 30px; /* 设置行高等于容器高度，实现单行文本的垂直居中 */
    text-align: center; /* 水平居中，如果需要的话 */
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.62);
}

.submenu-header:hover {
    background: rgba(255, 255, 255, 0.3);
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Active states */
.accordion-header.active + .accordion-content,
.submenu-header.active + .submenu-content {
    display: block;
}